﻿@{
    ViewBag.Title = "SimplePagination";
    Layout = "~/Views/Shared/_Page.cshtml";
}

<h2>Simple Pagination</h2>

<ul id="list"></ul>
<button class="previous"><< Previous</button>
<button class="next">Next >></button>

<script type="text/javascript">
    var animals = [
        {
            id: 1,
            name: 'Dog',
            type: 'Mammal'
        },
        {
            id: 2,
            name: 'Cat',
            type: 'Mammal'
        },
        {
            id: 3,
            name: 'Goat',
            type: 'Mammal'
        },
        {
            id: 4,
            name: 'Lizard',
            type: 'Reptile'
        },
        {
            id: 5,
            name: 'Frog',
            type: 'Amphibian'
        },
        {
            id: 6,
            name: 'Spider',
            type: 'Arachnid'
        },
        {
            id: 7,
            name: 'Crocodile',
            type: 'Reptile'
        },
        {
            id: 8,
            name: 'Tortoise',
            type: 'Reptile'
        },{
            id: 9,
            name: 'Barracuda',
            type: 'Fish'
        },
        {
            id: 10,
            name: 'Sheep',
            type: 'Mammal'
        },
        {
            id: 11,
            name: 'Lion',
            type: 'Mammal'
        },
        {
            id: 12,
            name: 'Seal',
            type: 'Mammal'
        }
    ];

    //var pageSize = 4;
    var currentPage = 1;
    var pagedResults = [];
    var totalResults = animals.length;
    
    function updateList(pageSize) {
        //Grab the required section of results from the animals list
        var end = (currentPage * pageSize);
        var start = (end - pageSize);
        pagedResults = animals.slice(start, end);

        //Empty the list element before re-population
        $('#list').empty();

        //Disable the previous button if we are on the first page
        if (currentPage <= 1) {
            $('.previous').prop("disabled", true);
        }
        //Enable the previous button if we are not on the first page
        else {
            $('.previous').prop("disabled", false);
        }

        //Disable the next button if there are no more pages
        if ((currentPage * pageSize) >= totalResults) {
            $('.next').prop("disabled", true);
        }
        //Enable the next button if there are results left to page
        else {
            $('.next').prop("disabled", false);
        }

        //Loop through the pages results and add them to the list
        $.each(pagedResults, function(index, obj){
            $('#list').append("<li><strong>" + obj.name + "</strong> (" + obj.type + ")</li>");
        });
    }

    $(document).ready(function () {
        var pageSize = 5;

        //Populate the list on load
        updateList(pageSize);
        $('.next').click(function () {
            //Only increase the current page if there are enough results
            if ((currentPage * pageSize) <= totalResults) currentPage++;
            updateList(pageSize);
        });
        $('.previous').click(function () {
            //Only decrease the current page if it is currently greater than 1
            if (currentPage > 1) currentPage--;
            updateList(pageSize);
        });
    });
</script>
